<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="token&&isLogin">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body">
					<navigator :url="'/package_common/search_tool/search_tool?dev_type='+dev_type+'&typeid='+select_dev.typeid" hover-class="none" class="change-btn">
						<view class="select-data">{{select_dev.name}}</view> 
						<view class="iconfont f-s20">&#xe623;</view>
					</navigator>
					<!-- 详情状态 -->
					<template v-if="!isSetting">
						<view class="detail-wrap m-t2">
							
							<view class="detail-item">
								<view class="label">设备状态</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r"> 
											<template v-if="params.status==1">开机</template>
											<template v-if="params.status==2">关机</template>
											<template v-if="params.status==3">未激活</template>
											<template v-if="params.status==4">已禁用</template>
										</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view> 
							
							<view class="detail-item">
								<view class="label">灯管开关</view>
								<view class="detail-switch">
									<switch color="#3399FF" :checked="params.light_status==1?true:false" disabled></switch>
									<view class="state">{{params.light_status==1?'开':'关'}}</view>
								</view>
							</view>
							<view v-if="select_dev.typeid!=21" class="detail-item">
								<view class="label">电机开关</view>
								<view class="detail-switch">
									<switch color="#3399FF" :checked="params.motor_rotation==1?true:false" disabled></switch>
									<view class="state">{{params.motor_rotation==1?'转':'停'}}</view>
								</view>
							</view>
							<view v-if="select_dev.typeid!=21" class="detail-item">
								<view class="label">拍照间隔</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{params.clean_interval}}min</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
							<view v-if="select_dev.typeid!=21" class="detail-item">
								<view class="label">请求时间</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{params.request_interval}}min</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">工作模式</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{params.run_mode_status_name}}</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>							 
							</view>
							<view class="detail-item">
								<view class="label">工作时长</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{params.everyday_work_date_start}}-{{params.everyday_work_date_over}}</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">电量</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{params.power}}</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>							 
							</view>
						</view>
					</template>
					
					<!-- 设置状态 -->
					<template v-else>
						<view class="form-wrap m-t2">
							<view class="form-item">
								<view class="label">设备状态</view>
								<picker class="form-picker" mode="selector" :range="dev_status" range-key="name" @change="changeDevStatus">
									<view class="picker">
										<view class="select-data t-r">{{select_dev_status.name}}</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</picker> 
							</view>
							
							<view class="form-item">
								<view class="label">灯管开关</view>
								<view class="detail-switch">
									<switch color="#3399FF" :checked="params.light_status==1?true:false" @change="lightSwitch"></switch>
									<view class="state">{{params.light_status==1?'开':'关'}}</view> 
								</view>
							</view>
							<view v-if="select_dev.typeid!=21" class="form-item">
								<view class="label">电机开关</view>
								<view class="detail-switch">
									<switch color="#3399FF" :checked="params.motor_rotation==1?true:false" @change="motorRotationSwitch"></switch>
									<view class="state">{{params.motor_rotation==1?'转':'停'}}</view> 
								</view>
							</view>
							<view v-if="select_dev.typeid!=21" class="form-item">
								<view class="label">拍照间隔</view>
								<picker class="form-picker" mode="selector" :range="camera_interval_data" @change="changeWorkdata">
									<view class="picker">
										<view class="select-data t-l">{{params.clean_interval}}min</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</picker> 
							</view>
							<view v-if="select_dev.typeid!=21" class="form-item">
								<view class="label">请求时间</view>
								<picker class="form-picker" mode="selector" :range="request_interval_data" @change="changeRequestIntervalData">
									<view class="picker">
										<view class="select-data t-l">{{params.request_interval}}min</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<view class="label">工作模式</view>
								<picker class="form-picker" mode="selector" :range="detail.work_status" range-key="name" @change="changeWorkStatus">
									<view class="picker">
										<view class="select-data t-l">{{params.run_mode_status_name}}</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</picker>
							</view>							
							<view class="form-item">
								<view class="label">工作时长</view>
								<view class="form-input">
									<view class="content">
										<view v-if="params.run_mode_status==1" class="val work-time"> 
											<view class="start">
												<view class="disabled">{{params.everyday_work_date_start}}</view>											
											</view>
											<view class="line">-</view>
											<view class="over">
												<view class="disabled">{{params.everyday_work_date_over}}</view>
											</view>
										</view>
										<view v-else class="val work-time">
											<view class="start">
												<picker mode="time" @change="changeTime($event,1)">
													<view>{{params.everyday_work_date_start}}</view> 
												</picker>												
											</view>
											<view class="line">-</view>
											<view class="over">
												<picker mode="time" @change="changeTime($event,2)">
													<view>{{params.everyday_work_date_over}}</view> 
												</picker>
											</view>
										</view>
									</view> 
								</view>
							</view>
						</view> 
					</template>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom">
						<view v-if="!isSetting" class="submit-btn" @click="showSetting">设置</view>
						<view v-else class="submit-btn" @click="saveSetting">保存设置</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	import formdemo from '@/components/form.vue'
	import loading from '@/components/loading-more.vue'
	export default {
		name: 'name',
		data() {
			return {
				dev_id: '',
				dev_name:'',
				dev_type:'',
				isLogin: false,
				isIphoneX: getApp().globalData.isIphoneX,
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				isStop: true,
				loadingState: {
					default: true
				},
				select_dev_status:{
					id:'',
					name:''
				},
				dev_status:[
					{
						id:1,
						name:"开机"
					},
					{
						id:2,
						name:"关机"
					},
					{
						id:3,
						name:"未激活"
					},
					{
						id:4,
						name:"已禁用"
					}
				],
				isSetting:false,
				detail: {},
				select_dev:{
					id:'',
					name:'',
					typeid:'',
					update:false
				},
				params: {
					status:'',
					light_status: '',
					run_mode_status: '',
					run_mode_status_name: '',
					motor_rotation:'',
					clean_interval: '',
					power:'',
					request_interval:'',
					everyday_work_date: '',
					everyday_work_date_start:'',
					everyday_work_date_over:''
				}, 
				camera_interval_data:[10,20,30,40,50,60],
				request_interval_data:[10,20,30,40,50,60]
			}
		},
		async onLoad(params) { 
			console.log(123,params)
			this.select_dev.id = params.dev_id;
			this.select_dev.name= params.dev_name;
			this.dev_type=params.dev_type;
			if(params.typeid){
				this.select_dev.typeid=params.typeid;
			}
			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.detail=await this.getZdqcDevManageData();
					console.log('detail',this.detail)
					this.setParams();
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			} 
			uni.setNavigationBarTitle({
				title:this.select_dev.name
			})
		},
		async onShow() {
			// 登录状态更新 重新获取token 等值
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.loginStateUpdate = false;
			}
			
			if(!this.token&&!this.isLogin){
				this.isLogin=await this.$loginState('reset'); 
			}
			
			if(this.select_dev.update){				
				this.detail=await this.getZdqcDevManageData();
				console.log('update',this.detail)
				this.setParams();
				this.select_dev.update=false;
			}
		},
		methods: {

			// 获取设备管理详情
			getZdqcDevManageData: async function() {
				let res = await this.$api.tool_api.getZdqcDevManageData({
					appid: this.appid,
					token: this.token,
					user_id:this.userInfo.uid,
					device_id: this.select_dev.id
				})
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					return res.data.data;
				}
			},

			// 获取设备管理参数
			setParams: function() {
				this.params.clean_interval = this.detail.list.clean_interval;
				this.params.request_interval=this.detail.list.request_interval;
				this.params.light_status = this.detail.list.light_status;
				this.params.power=this.detail.list.power==null?'':this.detail.list.power+'%';
				this.params.status=this.detail.list.status;   // 设备状态 1开机(在线)，2关机(离线)，3未激活，4已禁用
				this.params.everyday_work_date=this.detail.list.work_date;
				if(this.params.status==1){
					this.select_dev_status.name="开机";
				}else if(this.params.status==2){
					this.select_dev_status.name="关机";
				}else if(this.params.status==3){
					this.select_dev_status.name="未激活";
				}else if(this.params.status==4){
					this.select_dev_status.name="已禁用";
				}
				if(this.detail.list.run_mode==1){
					this.params.everyday_work_date='00.00-00.00';
					this.params.everyday_work_date_start = '00.00';
					this.params.everyday_work_date_over = '00.00'; 
				}else{
					this.params.everyday_work_date_start = this.detail.list.work_date.split('-')[0];
					this.params.everyday_work_date_over = this.detail.list.work_date.split('-')[1];					
				}	
				this.detail.work_status.forEach(item => {
					if (item.id == this.detail.list.run_mode) {
						this.params.run_mode_status_name = item.name;
						this.params.run_mode_status = item.id;
					}
				})
			},

			// 开关
			lightSwitch: function(e) { 
				this.params.light_status = e.detail.value ? 1 : 2; 
			},
			
			// 电机开关
			motorRotationSwitch:function(e){
				this.params.motor_rotation = e.detail.value ? 1 : 2; 
			},
			
			// 工作模式切换
			changeWorkStatus:function(e){
				let index=e.detail.value;
				this.params.run_mode_status=this.detail.work_status[index].id;
				this.params.run_mode_status_name=this.detail.work_status[index].name;
				this.params.everyday_work_date_start='00.00';
				this.params.everyday_work_date_over='00.00';
				this.params.everyday_work_date=this.params.everyday_work_date_start+'-'+this.params.everyday_work_date_over; 
			},
			
			// 设备状态切换
			changeDevStatus:function(e){
				let index=e.detail.value;
				this.params.status=this.dev_status[index].id;
				this.select_dev_status.name=this.dev_status[index].name;
			},
			
			// 切换拍照间隔
			changeWorkdata:function(e){
				let index=e.detail.value;
				this.params.clean_interval=this.camera_interval_data[index];
			},
			
			// 设置请求时间
			changeRequestIntervalData:function(e){
				let index=e.detail.value;
				this.params.request_interval=this.request_interval_data[index];
			},
			
			// 设置开始时间
			changeTime:function(e,type){ 
				if(type==1){
					this.params.everyday_work_date_start = e.detail.value; 
				}else if(type==2){ 
					this.params.everyday_work_date_over = e.detail.value;
				}
				this.params.everyday_work_date=this.params.everyday_work_date_start+'-'+this.params.everyday_work_date_over;
			},
			
			// 打开设置
			showSetting:function(){
				this.isSetting=true;
			},
			
			// 保存设置
			saveSetting:async function(){  
				let _this=this;
				if(this.isStop){
					this.isStop=false;
					uni.showLoading({
						title:'保存中'
					})				
					 
					let res=await this.$api.tool_api.saveZdqcDevManageData({
						appid:this.appid,
						token:this.token,
						device_id:this.select_dev.id,
						user_id:this.userInfo.uid,
						run_mode:this.params.run_mode_status,
						clean_interval:this.params.clean_interval,
						work_date:this.params.everyday_work_date,
						light_status:this.params.light_status,
						request_interval:this.params.request_interval,
						status:this.params.status
					}) 
					if(res.data.ret==1000){
						uni.hideLoading();	
						this.$showToast({
							icon:'success',
							title:'设置成功' 
						}).then(()=>{
							setTimeout(async ()=>{
								this.isStop=true;
								this.isSetting=false; 
								this.detail = await _this.getZdqcDevManageData();
								this.setParams();
							},2000);	
						})
											
					}else{
						uni.hideLoading();
						this.$showToast({
							icon:'error',
							title:'设置失败'
						})
						setTimeout(()=>{
							this.isStop=true;
						},300)
					} 
				}
				
				
			}


		},
		components: {
			loading
		},
		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less">
	.submit-btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #0085ff;
		color: #fff;
		font-size: 32rpx;
	}
	.work-time{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		.start,.over{ 
			flex-grow: 2;
			border:.1rpx solid #ddd;			
			text-align: center;
		}
		.line{
			margin:0 10rpx;
		}
		.disabled{
			background: #f5f5f5;
			color:#999;
		}
	}
	
</style>
